<template>
  <div>
    <div class="bai">
    <div class="guding">
    <el-form ref="form" :model="form" class="form_one" label-width="80px"  size="mini">
        <el-form-item label="查询名称" class="shu">
            <el-input v-model="form.name" placeholder="查询医师名称"></el-input>
            <el-button size="mini" type="primary" @click="dianj" style="margin-left: 14px;">查找</el-button>
            <el-button size="mini" @click="ko">重置</el-button>
        </el-form-item>
    </el-form>
    </div>
      <el-table stripe :data="data" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <!--  -->
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="姓名:">
                <span>{{ props.row.dname }}</span>
              </el-form-item>
              <el-form-item label="医生评分:">
                <span>{{ props.row.pingfen }}</span>
              </el-form-item>
              <el-form-item label="挂号费:">
                <span>{{ props.row.price }}</span>
              </el-form-item>
              <el-form-item label="出诊地:">
                <span>{{ props.row.hadd }}</span>
              </el-form-item>
              <el-form-item label="擅长急病 :">
                <span>{{ props.row.strong }}</span>
              </el-form-item>
              <el-form-item label="擅长:">
                <span>{{ props.row.keshi }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="医生" prop="dname"> </el-table-column>
        <el-table-column label="科室" prop="kshi"> </el-table-column>
        <el-table-column label="医生职称" prop="lv"> </el-table-column>
        <el-table-column label="所在医院" prop="hname"> </el-table-column>
        
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names:'',
      data: [],
      form: {
        name: '',
      },
    }
  },
  mounted() {
    this.getData();
  },

  methods: {
    ko(){
      this.form.name = ''
      this.names = this.form.name
      this.getData()
    },
    dianj(){
       this.names = this.form.name
       this.getData()

    },
    getData() {
      let url = `/doctor_ht?dname=${this.names}`;
      this.axios.get(url).then((res) => {
        this.data = res.data.data;
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bai{
  background-color: #fff;
  height: calc(100vh - 140px);
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 20px;
  position: relative;
    box-shadow:0px 0px 10px #ccc;
     border-radius: 7px;

}
.el-table{
    padding-left: 10px;
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
    padding-left: 58px;
    
  }




::v-deep .el-input{
  width: 215px;
}

::v-deep .el-form-item__label{
  color: #99a9bf;
}



</style>